<template>
	<div class="common-layout" style="background-color: rgb(229, 228, 228);">
		<el-header class="header">
			<strong>广州应用科技学院<small>教务管理系统</small><small style="color: red;">此网站只用于研讨学习，不对外公开</small></strong>
			<div style="display: flex;justify-content: space-between; align-items: center;width: 110px;">
				<div class="img" @mouseenter="show = true" @mouseleave="show = false">
					<img :src="userStore.avtarSrc">
					<Mine v-show="show"
						style="position: absolute;top:0; right: 0;z-index: 5;background-color: rgba(255,255,255,0.6); backdrop-filter: blur(6px);" />
				</div>
				<div>{{ userStore.name }}</div>
			</div>

			<div style="position: absolute;right: 3%;bottom: 5%;" v-show="showBtn">
				<a-tooltip :title="chatBtnTip">
					<a-button type="primary" size="large" @click="chatPage" shape="circle" :icon="icon" />
				</a-tooltip>
			</div>

		</el-header>
		<el-container>
			<el-aside width="15vw" style="height:88vh;overflow: scroll;">
				<el-menu default-active="1-1" @select="handleSelect" style="width: 100%;" active-text-color="#ffd04b"
					background-color="#337ecc" text-color="#fff">
					<el-sub-menu index="1">
						<template #title>
							<el-icon>
								<location />
							</el-icon>
							<span>课程安排</span>
						</template>
						<el-menu-item index="1-1">课程表</el-menu-item>
						<el-menu-item index="1-2">免修课程</el-menu-item>
						<el-menu-item index="1-3">必修课</el-menu-item>
						<el-menu-item index="1-4">选修课</el-menu-item>
						<el-divider />
					</el-sub-menu>
					<el-sub-menu index="2">
						<template #title>
							<el-icon>
								<location />
							</el-icon>
							<span>学籍成绩</span>
						</template>
						<el-menu-item index="2-1">最新成绩</el-menu-item>
						<el-menu-item index="2-2">往年成绩</el-menu-item>
						<el-menu-item index="2-3">挂科记录</el-menu-item>
						<el-divider />
					</el-sub-menu>
					<el-sub-menu index="3">
						<template #title>
							<el-icon>
								<location />
							</el-icon>
							<span>培养管理</span>
						</template>
						<el-menu-item index="3-1">出国留学</el-menu-item>
						<el-menu-item index="3-2">科研项目</el-menu-item>
						<el-divider />
					</el-sub-menu>
					<el-sub-menu index="4">
						<template #title>
							<el-icon>
								<location />
							</el-icon>
							<span>考试报名</span>
						</template>
						<el-menu-item index="4-1">ETC</el-menu-item>
						<el-menu-item index="4-2">雅思</el-menu-item>
						<el-menu-item index="4-2">托福</el-menu-item>
						<el-divider />
					</el-sub-menu>
					<el-menu-item index="5">
						<el-icon><icon-menu /></el-icon>
						<span>实践环节</span>
					</el-menu-item>
					<el-menu-item index="6">
						<el-icon>
							<document />
						</el-icon>
						<span>教学评价</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main style="padding: 0;">
				<RouterView />
			</el-main>
		</el-container>

	</div>
</template>
<script setup>
import { h, onMounted } from 'vue';
import { CommentOutlined, CloseOutlined } from '@ant-design/icons-vue';
import Mine from '@/components/Mine.vue';
import { useUserStore } from '@/stores/user';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import {
	Document,
	Menu as IconMenu,
	Location,
} from '@element-plus/icons-vue'
import axios from 'axios';


onMounted(
	() => {
		axios(
			{
				method: 'post',
				url: '/verify',
				headers: {
					'token': localStorage.getItem('token')
				}

			}
		).then(
			res => {
				if(res.data.status =='0'){
					router.replace('/login')
				}
			}
		)
	}
)


const router = useRouter()
const icon = ref(h())
const handleSelect = index => {
	if (index === '1-1') {
		router.replace('/home/course_table')
	}
}
const userStore = useUserStore()
const show = ref(false)
const showBtn = ref(true)
const chatBtnTip = ref('')
chatBtnTip.value = router.currentRoute.value.path === '/home/chat' ? '返回' : '聊天'
icon.value = router.currentRoute.value.path === '/home/chat' ? h(CloseOutlined) : h(CommentOutlined)
const chatPage = () => {
	if (router.currentRoute.value.path === '/home/chat') {
		chatBtnTip.value = '聊天'
		icon.value = h(CommentOutlined)
		router.back()
	} else {
		chatBtnTip.value = '返回'
		icon.value = h(CloseOutlined)
		router.push('/home/chat')
	}
}

axios(
	{
		method: 'get',
		url: '/avatar',
		responseType: 'blob', //  如果不设置，默认是json	
		headers:{
			'token':localStorage.getItem('token')
		},
	}
).then(
	res => {
		if (res.data) {
			let avtarBlob = res.data;
			userStore.avtarSrc = URL.createObjectURL(avtarBlob);
		}
	}
).catch(
	() => {
		ElMessage.error('服务器链接失败！')
	}
)

</script>
<style scoped>
.header {
	padding: 30px;
	background-color: #337ecc;
	height: 12vh;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

strong {
	font-size: 27px;
	color: #fff;
}

small {
	margin-left: 20px;
	font-weight: 100;
	font-size: 20px;
}


.img {
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 25px;
}

img {
	position: relative;
	width: inherit;
	height: inherit;
	border-radius: inherit;
}


::-webkit-scrollbar {
	width: 2px;
}

::-webkit-scrollbar-thumb {
	background-color: rgb(49, 41, 96);
}
</style>

